import groupAddHtml from '../../assets/partials/group-add.html'
import BootstrapDialog from 'bootstrap3-dialog';

$.addGroup = function addGroup(pId) {
    BootstrapDialog.show({
        title: "添加分组",
        type: BootstrapDialog.TYPE_DEFAULT,
        size: BootstrapDialog.SIZE_LARGE,
        closable: true, // 关闭方式
        closeByBackdrop: true, // 关闭方式
        closeByKeyboard: true, // 关闭方式 键盘ecs
        animate: true,
        message: $("<div>").html(groupAddHtml),
        draggable: true, // 是否可拖动
        buttons: [{
            label: "提交",
            cssClass: "btn-primary btn-sm",
            hotkey: 66, //热键 66 -> A | 13 -> Enter
            icon: "glyphicon glyphicon-plus",
            autospin: true,
            action: function(dialog) {
                let params = {
                    pGroupId: pId
                }
                let a = dialog.getModalBody().find("form").serializeArray();
                a.forEach(data => {
                    params[data.name] = data.value;
                });
                $.myAjax({
                    url: "group/addGroup.do",
                    data: params,
                    success: function(res) {
                        const newGroupId = res.data;
                        const indent = 1;
                        const $newTreeNode = $(`
                            <li class="tree-node" data-id="${newGroupId}">
                                <div class="tree-node-line clearfix" bind-click="toggleTree">
                                    <input type="text" value="${params.name}" class="tree-node-text" readonly>
                                    <div class="tree-node-action group-action">
                                        <i class="icon icon-del" data-id="${newGroupId}" bind-click="delGroup"></i>
                                        <i class="icon icon-inlineEdit" data-id="${newGroupId}" bind-click="editGroup"></i>
                                        <i class="icon icon-add" bind-click="addGroup"></i>
                                    </div>
                                    <div class="tree-node-action hidden">
                                        <i class="icon icon-inlineCanel" bind-click="cancelEditGroup"></i>
                                        <i class="icon icon-inlineOk" data-id="${newGroupId}" bind-click="submitEditGroup"></i>
                                    </div>
                                </div>
                                <ul class="tree"><ul/>
                            </li>
                        `);
                        const $nodetext = $newTreeNode.find('.tree-node-text');
                        if(pId) {
                            const $parentTreeNode = $(`.tree-node[data-id=${pId}]`);
                            let $parentTree = $parentTreeNode.find('>.tree');
                            if($parentTree.length < 1) {
                                $parentTree = $('<ul class="node">');
                                $parentTreeNode.append($parentTree);
                            }
                            $parentTree.append($newTreeNode);
                        } else {
                            $('#menu-tree').append($newTreeNode);
                        }
                        $newTreeNode.find('>.tree-node-line').data('node', {
                            id: newGroupId,
                            name: params.name
                        });
                        $nodetext.css('text-indent', $newTreeNode.parents('.tree').length+'em');
                    }
                });
                dialog.enableButtons(false);
                dialog.setClosable(false);
                dialog.close();
            }
        }]
    });
}
